<%--
  Created by IntelliJ IDEA.
  User: abcc
  Date: 2019/9/29
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/person/person.css">
    <link rel="stylesheet" href="${path}/css/person/focuson.css">
    <!-- 宠物秀需要的相册js -->
    <link rel="stylesheet" href="${path}/css/person/images/animate.css">
    <link rel="stylesheet" href="${path}/css/person/images/blueimp-gallery.min.css">
    <link rel="stylesheet" href="${path}/plugins/layui-v2.5.5/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${path}/css/person/images/font-awesome.css">

</head>
<body>
<%@include file="../sharedper/nav.jsp"%>


<!-- 主体部分 -->
<%@include file="../sharedper/common.jsp"%>

<div class="container" style="width: 1015px">
    <div class="pet-list">
        <span>我的宠物:</span>
        <ul>
            <c:forEach items="${requestScope.petlist}" var="pet" >
            <li>
                <a href='${path}/edit/pet/${pet.pId}'><img src="${pet.picurl}" alt=""></a>
                <span style="color: #999;
                        font-size: 12px;">${pet.pName}</span>

            </li>
            </c:forEach>
        </ul>
    </div>

    <div class="col-md-9" style="margin-top: 20px;background-color: #fff;margin-bottom: 5px;" id="personC">
        <p class="ztx1 zactive" id="post">帖子</p>
        <p class="ztx1" id="petshow">宠物秀</p>
        <p class="ztx1" id="dynamic">动态</p>
        <%--<p class="ztx1" id="security" onclick="window.location.href='${path}/info/safety'">账号与安全</p>--%>

        <!-- 帖子模块 -->
        <div id="module1">
            <%--<c:forEach items="${requestScope.postlist}" var="post">--%>
            <%--<div class="xztleft">--%>
                <%--<a href="#" class="xztlefta" style="margin-top: 10px">${post.title}</a>--%>
                <%--<br>--%>
                <%--<br>--%>
            <%--</div>--%>
            <%--<a href="#" class="xztlefta1" style="color: #999;">--%>
                <%--${post.postContent}</a>--%>

            <%--<p style="margin-top: 4px;line-height: 12px;">--%>
                <%--<span class="glyphicon glyphicon-thumbs-up" style="color: #999;"></span>--%>
                <%--<span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">${post.pointNum}</span>--%>
                <%--<span class="glyphicon glyphicon-comment" style="color: #999;"></span>--%>
                <%--<span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">${post.visitNum}</span>--%>
                <%--<span style="float: right;font-size: 13px;color: #999;text-align: right"><fmt:formatDate value="${post.ptime}" pattern="yyyy.MM.dd HH:MM:ss"/></span>--%>
            <%--</p>--%>
            <%--<hr class="hrLine" style="width:100%;" />--%>
            <%--</c:forEach>--%>
        </div>

        <!-- 动态 -->
        <!-- 动态 -->
        <div id="module3" style="display: none">
            <c:forEach items="${requestScope.comlist}" var="com" varStatus="loop">
                <div style="line-height: 30px;">
                <c:if test="${empty requestScope.comlist}">
                    <p style="text-align: center;font-size: 20px;color: #999999;">没有动态哦</p>
                </c:if>
                <c:if test="${!empty requestScope.comlist}">
                    <i class="pets">回复了帖子</i>
                    <span class="petsp"><fmt:formatDate value="${com.ctime}" pattern="yyyy.MM.dd HH:MM:ss"/></span><br>
                    <i class="pets" style="color: #333">回复内容:</i><br>
                    <i class="pets" style="color: #333">${com.content}</i><br>
                    <div class="inpost">
                        <span class="insp">${title[loop.count-1]}</span>
                    </div>

                    <p style="margin-top: 4px;line-height: 12px;padding-left: 5px">
                        <span class="glyphicon glyphicon-thumbs-up" style="color: #999;"></span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">${com.pointNum}</span>
                        <span class="glyphicon glyphicon-comment" style="color: #999;"></span>
                        <span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">${loop.count+3}</span>
                    </p>
                    <hr class="hrLine" style="width:100%;" />
                </c:if>
                </div>
            </c:forEach>

        </div>

        <!-- 动态 -->
        <div id="module2" style="display: none">
            <%--<div>--%>
                <%--<i class="pets" style="color: #333">最新动态</i>--%>
                <%--<div class="lightBoxGallery">--%>
                    <%--<a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img--%>
                            <%--src="../../imgs/index/1.jpg"></a>--%>
                    <%--<a href="../../imgs/index/1.jpg" title="图片" data-gallery=""><img--%>
                            <%--src="../../imgs/index/1.jpg"></a>--%>
                    <%--<p style="margin-top: 4px;line-height: 12px;margin-left: 5px">--%>
                        <%--<span class="glyphicon glyphicon-thumbs-up" style="color: #999;">赞</span>--%>
                        <%--<span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">144</span>--%>
                        <%--<span class="glyphicon glyphicon-comment" style="color: #999;">--%>
                                <%--评论--%>
                            <%--</span>--%>
                        <%--<span style="margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999">234</span>--%>
                        <%--<span--%>
                                <%--style="margin-left: 415px;font-size: 13px;color: #999;text-align: right">2019.05.06&nbsp;15:14:05</span>--%>
                    <%--</p>--%>
                <%--</div>--%>
            </div>
            <%--<hr>--%>




            <div id="blueimp-gallery" class="blueimp-gallery">
                <div class="slides"></div>
                <h3 class="title"></h3>
                <a class="prev">‹</a>
                <a class="next">›</a>
                <a class="close">×</a>
                <a class="play-pause"></a>
                <ol class="indicator"></ol>
            </div>
        </div>

    <%--</div>--%>


    <!-- 右边 -->

    <div class="col-md-3 " style="margin-top: 20px;">
        <div class="card" style="background-color: #fff;">
            我的成就
        </div>

        <div style="padding: 12px 0; color: #646464;background-color: #fff;">
            <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-thumbs-up">
                        获得了${requestScope.otherInfo.myzanNum}个赞
                    </span>
            </div>
            <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-comment">
                        获得了${requestScope.otherInfo.commentNum}个评论
                    </span>
            </div>
        </div>

        <div class="card" style="align-items:unset;padding-left: 0px;">
            <div style="display: flex;padding: 12px 0;">
                    <span class="input-group-btn">
                        <%--<a href='${path}/info/otherFocuson'><button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="hides()">--%>
                            <%--关注了${requestScope.otherInfo.foucNum}人--%>
                        <%--</button></a>--%>
                        <%--<a href='${path}/info/otherFocuson'><button class="btn btn-default" type="button" style="width: 110px;height:85px">--%>
                            <%--粉丝${requestScope.otherInfo.fansNum}人--%>
                        <%--</button></a>--%>

                         <a href='#'><button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="hides()">
                            关注了${requestScope.otherInfo.foucNum}人
                        </button></a>
                        <a href='#'><button class="btn btn-default" type="button" style="width: 110px;height:85px">
                            粉丝${requestScope.otherInfo.fansNum}人
                        </button></a>
                    </span>

            </div>
        </div>
        <div style="background-color: #fff;margin-top: 58px">
            <a href="#" class="list-group-item">积分${requestScope.otherInfo.uClass}</a>
            <a href="#" class="list-group-item">收藏</a>
            <a href="#" class="list-group-item">发布</a>
        </div>

    </div>
</div>


<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<script src="${path}/js/person/person.js"></script>

<!-- 宠物秀需要引入的js -->
<script src="${path}/js/person/images/jquery.blueimp-gallery.min.js"></script>
<%--流加载--%>
<script src="${path}/plugins/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>


<script>
    $(document).ready(function () {
        $("#search").focus(function () {
            $(this).css("padding-right", "180.5px")
        });
        $("#search").blur(function () {
            $(this).css("padding-right", "42.5px")
        });
    });



    <%--function editInfo(obj) {--%>
         <%--// var info = $(obj).attr('id');--%>
        <%--var info = $(obj).val();--%>
         <%--alert(info);--%>
        <%--// if(infoid==0){--%>
        <%--//     $("#userinfo_head1").addClass("person");--%>
        <%--//     $("#userinfo_head2").removeClass("person");--%>
        <%--//     $("#block1").show();--%>
        <%--//     $("#block2").hide();--%>
        <%--// }else{--%>
        <%--//     $("#userinfo_head2").addClass("person");--%>
        <%--//     $("#userinfo_head1").removeClass("person");--%>
        <%--//     $("#block2").show();--%>
        <%--//     $("#block1").hide();--%>
        <%--// }--%>
        <%--window.location ='${path}/info/data/'+info;--%>
    <%--}--%>
    layui.use('flow', function() {
        var flow = layui.flow;

        flow.load({
            elem: '#module1' //流加载容器
            , done: function (page, next) { //执行下一页的回调
                var lis = [];
                $.get(
                    "${path}/info/postlist",
                    {id:${requestScope.otherInfo.id}},
                    function (data) {
                        for (var i = (page - 1) * 3; i <= (page * 3 - 1); i++) {
                            if (i < data.length) {
                                str = "";
                                str +="<div id='"+data[i].postId+"'>";
                                str += "<div class='xztleft'>";
                                str += " <a href='#' class='xztlefta' style='margin-top: 10px'>" + data[i].title + "</a>";  //加一个button
                                // str += " <p style='float: right;margin-top: 15px;margin-right: 5px;'><button type='button' class='btn btn-default btn-sm' onclick='delPost('"+data[i].postId+"')'>删除帖子</button></p>";
                                str += "<br>";
                                str += "<br>";
                                str += "</div>";
                                str += "<a href='#' class='xztlefta1' style='color: #999;'>" + data[i].postContent + "</a>";
                                str += "<p style='margin-top: 4px;line-height: 12px;'>";
                                str += "<span class='glyphicon glyphicon-thumbs-up' style='color: #999;'></span>"
                                str += "<span style='margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999'>" + data[i].pointNum + "</span>";
                                str += "<span class='glyphicon glyphicon-comment' style='color: #999;'></span>";
                                str += "<span style='margin-right: 10px;font-size: 12px;margin-left: 0px;color: #999'>" + data[i].visitNum + "</span>";
                                str += "<span style='float: right;font-size: 13px;color: #999;text-align: right'>" + data[i].ptime.substring(0, 10) + "</span>";
                                str += "</p><hr class='hrLine' style='width:100%;' />";
                                str += "</div>"
                                $("#module1>div:last-child").before(str);
                            }
                        }
                        var count = ((data.length)/3+1);
                        next(lis.join(''), page <= count);
                    }

                );

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                //假设总页数为 10
            }
        });

        flow.load({
            elem: '#module2' //流加载容器
            , done: function (page, next) { //执行下一页的回调
                var lis = [];
                $.get(
                    "${path}/info/piclist",
                    {id:${requestScope.otherInfo.id}},
                    function (data) {
                        for (var i = (page - 1) * 3; i <= (page * 3 - 1); i++) {
                            if (i < data.length) {
                                str = "";
                                if(data[i].picCollect==0) {
                                    str += "<div id='" + data[i].picId + "' style='display: block'>";
                                    str += "<i class='pets' style='color: #333'>最新动态</i>";
                                    // str += " <p style='float: right;margin-top: 5px;margin-right: 5px;'><button type='button' class='btn btn-default btn-sm' onclick='delPic(" + data[i].picId + ")'>删除动态</button></p>";
                                    str += "<div class='lightBoxGallery'>";  //加一个button
                                    str += "<a href='" + data[i].picImg + "' title='图片' data-gallery=''><img src='" + data[i].picImg + "'></a>";
                                    str += "<p style='margin-top: 4px;line-height: 12px;margin-left: 5px'>";
                                    str += "<span class='glyphicon glyphicon-eye-open' style='color: #999;'></span>";
                                    str += "<span style='margin-right: 20px;font-size: 12px;margin-left: 5px;color: #999'>" + data[i].picViews + "</span>";
                                    str += "<span class='glyphicon glyphicon-tasks' style='color: #999;'> </span>";
                                    str += "<span style='margin-right: 10px;font-size: 12px;margin-left: 5px;color: #999'>" + data[i].picType + "</span>"
                                    str += "<span style='margin-left:510px;font-size: 13px;color: #999;text-align: right'>" + data[i].picDate.substring(0, 10) + "</span>";
                                    str += "</p>";
                                    str += "</div>";
                                    str += "<hr>";
                                    str += "</div>";
                                }
                                $("#module2>div:last-child").before(str);
                            }
                        }
                        var count = ((data.length)/3+1);
                        next(lis.join(''), page <= count);
                    }

                );

                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                //假设总页数为 10
            }
        });
        <%--//评论的回复--%>
        <%--flow.load({--%>
        <%--elem: '#module3' //流加载容器--%>
        <%--, done: function (page, next) { //执行下一页的回调--%>
        <%--var lis = [];--%>
        <%--$.get(--%>
        <%--"${path}/info/com",--%>
        <%--{id:${sessionScope.user.id}},--%>
        <%--function (data) {--%>
        <%--for (var i = (page - 1) * 3; i <= (page * 3 - 1); i++) {--%>
        <%--if (i < data.length) {--%>
        <%--var titles = data.keySet();--%>
        <%--var com = data.get(titles);--%>
        <%--console.log(titles);--%>
        <%--console.log(com);--%>
        <%--str = "";--%>
        <%--if(data[i].picCollect==0) {--%>
        <%--str += "<div id='" + data[i].picId + "' style='display: block'>";--%>
        <%--str += "<i class='pets' style='color: #333'>最新动态</i>";--%>
        <%--str += " <p style='float: right;margin-top: 5px;margin-right: 5px;'><button type='button' class='btn btn-default btn-sm' onclick='delPic(" + data[i].picId + ")'>删除动态</button></p>";--%>
        <%--str += "<div class='lightBoxGallery'>";  //加一个button--%>
        <%--str += "<a href='" + data[i].picImg + "' title='图片' data-gallery=''><img src='" + data[i].picImg + "'></a>";--%>
        <%--str += "<p style='margin-top: 4px;line-height: 12px;margin-left: 5px'>";--%>
        <%--str += "<span class='glyphicon glyphicon-eye-open' style='color: #999;'></span>";--%>
        <%--str += "<span style='margin-right: 20px;font-size: 12px;margin-left: 5px;color: #999'>" + data[i].picViews + "</span>";--%>
        <%--str += "<span class='glyphicon glyphicon-tasks' style='color: #999;'> </span>";--%>
        <%--str += "<span style='margin-right: 10px;font-size: 12px;margin-left: 5px;color: #999'>" + data[i].picType + "</span>"--%>
        <%--str += "<span style='margin-left:510px;font-size: 13px;color: #999;text-align: right'>" + data[i].picDate.substring(0, 10) + "</span>";--%>
        <%--str += "</p>";--%>
        <%--str += "</div>";--%>
        <%--str += "<hr>";--%>
        <%--str += "</div>";--%>
        <%--}--%>
        <%--$("#module3>div:last-child").before(str);--%>
        <%--}--%>
        <%--}--%>
        <%--var count = ((data.length)/3+1);--%>
        <%--next(lis.join(''), page <= count);--%>
        <%--}--%>

        <%--);--%>

        <%--//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页--%>
        <%--//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多--%>
        <%--//假设总页数为 10--%>
        <%--}--%>
        <%--});--%>
    });

    function addFocus(id,userByid) {
        // layer.msg('关注成功!!',{
        //     btn:['我知道了']
        // });
        $.post("${path}/add/focu/"+id+"/"+userByid,{id:id,userId:userByid},function (data) {
            layer.msg('关注成功!!',{
                btn:['我知道了']
            });
            $("#other").text("互相关注");
            $("#other").attr('disabled',true);
        });
    }

</script>

</body>
</html>
